<template>
  <div class="order">
    <van-sticky class="van-sticky">
      <NavBar leftText="返回" title="订单列表"></NavBar>
      <van-tabs sticky v-model:active="currentOrder">
        <template v-for="(item, index) in orderTitles" :key="index">
          <van-tab :title="item"> </van-tab>
        </template>
      </van-tabs>
    </van-sticky>

    <div class="content">
      <div v-if="orderlist.length">
        <template v-for="(item, index) in orderlist" :key="index">
          <div class="order-item">
            <div class="order-title">
              <div class="title-unitName">
                {{ item.unitName }}
              </div>
              <div class="title-status" :style="{ color: item.orderStatusDescColor }">
                {{ item.orderStatusDesc }}{{ item.cancelReasonDesc }}
              </div>
            </div>

            
            <OrderChart :item="item"></OrderChart>

            <OrderBottom :item="item"></OrderBottom>
          </div>
        </template>
      </div>
      <!-- <div v-else="!orderlist.length" class="tips">
        <img src="@/assets/img/order/icon-order.png" alt="" />
        <div class="title">近期暂无订单</div>
      </div> -->
    </div>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue'
  import useOrderListStore from '@/stores/modules/order'
  import NavBar from '@/components/nav-bar/nav-bar.vue'
  import OrderBottom from './cpns/order-bottom.vue'
  import OrderChart from './cpns/order-chart.vue'

  import { getOrderList } from '@/services'
  //发送请求
  const orderStore = useOrderListStore()
  orderStore.fetchOrderListData()
  const orderlist = ref([])
  const currentOrder = ref()
  const orderTitles = ['全部订单', '近期订单', '待支付', '待确认', '待入住']
  const orderTitleType = ['all', 'recent', 'pend']
  //监听 动态发送getOrderList()请求获得数据
  watch(
    currentOrder,
    (newValue, oldValue) => {
      getOrderList(orderTitleType[newValue]).then((res) => {
        orderlist.value = res.data.data.orders
      })
    },
    {
      immediate: true
    }
  )


</script>

<style lang="less" scoped>
  /* 重写Vant 样式 */
  :global(.order .van-tab--active) {
    font-weight: 400;
  }
  .order {
    background-color: #f7f8fb;
    .content {
      padding: 0 0 50px 0;
      .order-item {
        margin: 10px 0 10px 0;
        background-color: #fff;
        padding: 0 20px 10px 20px;

        .order-title {
          font-size: 12px;
          color: #333;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 0;
          .title-unitName {
            display: inline-block;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
          }
          .title-status {
            font-size: 18px;
            color: #ff9645;
          }
        }
      
      
      }
    }
  }
</style>
